<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lcy">
    <script src="jquery-3.1.1.js"></script>
    <title></title>
    <style>
        input{
            display: none;
        }
        img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <form action="">
        <div class="chooseimg">
            <img src="images/add.png" alt="">
            <input type="file">
            <img src="images/add.png" alt="">
            <input type="file">
            <img src="images/add.png" alt="">
            <input type="file">
        </div>
        <div>
            <button type="button">添加</button>
            <button type="submit">上传</button>
        </div>
    </form>
</body>
</html>
<script>
    // 点击添加按钮 添加一对img和input
    $('button').eq(0).click(function(){
        $('.chooseimg').append('<img src="images/add.png" alt="">').append('<input type="file">');
    })
    // 点击图片实现选择文件的效果 如果想要给后添加的占位符也添加上选择文件的效果 最好使用代理事件 否则用click那么新添加的占位符不能实现选择文件的效果
    // delegate(); 是为匹配的所有元素绑定一个事件 语法结构 delegate(selector,ev,function); selector 选择器 选择给谁绑定事件 event 事件类型，比如 click点击事件 function 回调函数 当触发事件后执行的操作
    // $('.chooseimg').delegate('img','click',function(){
    //     $(this).next().click();
    // });
    // delegate();已经被弃用 可以使用on来代替 用法 on(event,selector,function)
    $('.chooseimg').on('click','img',function(){
        $(this).next().click();
    })
    // 显示图片的时候也要使用代理
    // $('.chooseimg').delegate('input','change',function(){
    //     // 取出上传的文件判断是否是图片
    //     var file=this.files[0];
    //     // 判断上传的是否是图片
    //     if(file.type.startsWith('image')){
    //         $(this).prev().attr('src',URL.createObjectURL(file));
    //     }
    // })
    $('.chooseimg').on('change','input',function(){
        var file=this.files[0];
        if(file.type.startsWith('image')){
            $(this).prev().attr('src',URL.createObjectURL(file));
        }
    })
</script>